<template>
  <div class="center">
    <div class="topBox">
      <div class="item">
        <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
          <div class="itemContent">
            <img src="../../../public//ServiceDocument/danwei.png" alt="">
            <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;gap: 5px;">
              <div>单位数</div>
              <div><span style="color: #ffb200;font-size: large;">30</span>个</div>
            </div>
          </div>
        </dv-border-box-7>
      </div>
      <div class="item">
        <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
          <div class="itemContent">
            <img src="../../../public//ServiceDocument/window.png" alt="">
            <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;gap: 5px;">
              <div>窗口数</div>
              <div><span style="color: #ffb200;font-size: large;">200</span>个</div>
            </div>
          </div>
        </dv-border-box-7>
      </div>
      <div class="item">
        <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
          <div class="itemContent">
            <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;gap: 5px;">
              <div>全年累计取号量</div>
              <div style="display: flex;gap: 6px;">
                <p v-for="(item, index) in takeNumDigits" :key="index">{{ item }}</p>
              </div>
            </div>

          </div>
        </dv-border-box-7>
      </div>
      <div class="item">
        <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
          <div class="itemContent">
            <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;gap: 5px;">
              <div>全年累计办件量</div>
              <div style="display: flex;gap: 6px;">
                <p v-for="(item, index) in processDigits" :key="index">{{ item }}</p>
              </div>
            </div>

          </div>
        </dv-border-box-7>
      </div>
    </div>
    <div class="map">
      <div class="map-container" ref="mapRef"></div>
    </div>
    <div class="bottomBox">
      <div class="itemBox">
        <dv-border-box-11 title="累计平均叫号等待时长" :color="['#071334', '#0c698f']">
          <div style="padding:20px;">
            <!-- 柱状图 -->
            <div class="chartBox">
              <div id="main" style="width: 100%; height: 250px;"></div>
            </div>
          </div>
        </dv-border-box-11>
      </div>
      <div class="itemBox">
        <dv-border-box-11 title="累计平均办件受理时长" :color="['#071334', '#0c698f']">
          <div style="padding:20px;">
            <!-- 柱状图 -->
            <div class="chartBox">
              <div id="right" style="width: 100%; height: 250px;"></div>
            </div>
          </div>
        </dv-border-box-11>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入广东省地图 GeoJSON 数据（可从官方仓库或资源站获取）
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import guangdongJson from './guangdong.json';
const processTotal = ref(101233); // 办件量初始值
const processDigits = ref([1, 0, 1, 2, 3, 3]);
const takeNumTotal = ref(123454); // 取号量初始值
const takeNumDigits = ref([1, 2, 3, 4, 5, 4]);
let Timer = null;
let flashTimer = null; // 定时器
// 定义地图容器引用
const mapRef = ref(null);
// 图表实例变量
let chart = null;
// 初始化地图
const initMap = () => {
  // 注册地图数据
  echarts.registerMap('广东', guangdongJson);

  // 获取DOM元素并初始化图表
  if (mapRef.value) {
    chart = echarts.init(mapRef.value);

    // 标记点数据
    const markPoints = [
      { name: '韶关市', coord: [113.61, 24.81] },
      { name: '梅州市', coord: [116.12, 24.28] },
      { name: '河源市', coord: [114.68, 23.73] },
      { name: '广州市', coord: [113.26, 23.13] },
      { name: '云浮市', coord: [112.02, 22.93] },
      { name: '惠州市', coord: [114.06, 22.62] },
      { name: '湛江市', coord: [110.364977,21.274898]},
    ];
    // 地图配置项
    const option = {
      series: [
        {
          type: 'map',
          mapType: '广东',
          label: {
            show: true,
            color: '#ffffff' // 城市名称文字颜色
          },
          itemStyle: {
            areaColor: '#2196f3', // 地图区域底色
            borderColor: '#ffffff', // 区域边框颜色
            borderWidth: 1
          },
          emphasis: {
            // 鼠标悬停时的样式
            itemStyle: {
              areaColor: '#42a5f5'
            }
          },
          markPoint: {
            // 标记点样式
            symbol: 'circle',
            symbolSize: 12,
            itemStyle: {
              color: '#ffeb3b', // 标记点颜色
              opacity: 1 // 初始透明度
            },
            label: {
              show: false
            },
            data: markPoints.map(item => ({
              name: item.name,
              coord: item.coord
            }))
          }
        }
      ]
    };

    // 设置配置项并渲染
    chart.setOption(option);
    // 实现闪烁效果：定时切换透明度
    let isFlicker = false;
    flashTimer = setInterval(() => {
      isFlicker = !isFlicker;
      chart.setOption({
        series: [
          {
            markPoint: {
              itemStyle: {
                opacity: isFlicker ? 0.1 : 1, // 切换透明度（0.3 <-> 1）
                // 也可切换颜色：color: isFlicker ? '#ff3e3e' : '#ffffff'
              },
              symbolSize: isFlicker ? 8 : 12 // 可选：同时切换大小增强闪烁感
            }
          }
        ]
      });
    }, 500); // 500ms 闪烁一次（可调整频率）
  }
};

// 窗口大小变化时重绘
const handleResize = () => {
  if (chart) {
    chart.resize();
  }
};

// 生命周期钩子
onMounted(() => {
  initMap();
  window.addEventListener('resize', handleResize);
  // 左边柱状图
  var leftChartDom = document.getElementById('main');
  var myChart = echarts.init(leftChartDom);
  var leftOption;
  leftOption = {
    // 坐标轴
    xAxis: {
      type: 'category',
      data: ['单位A', '单位B', '单位C', '单位D', '单位E'],
      axisLine: {
        lineStyle: {
          color: '#80c0e0'
        }
      },
      axisLabel: {
        color: '#ffffff'
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: 'min',
      nameTextStyle: {
        color: '#ffffff'
      },
      axisLine: {
        lineStyle: {
          color: '#80c0e0'
        }
      },
      axisLabel: {
        color: '#ffffff'
      },
      splitLine: {
        lineStyle: {
          color: '#80c0e0',
          type: 'dashed'
        }
      },
      axisTick: {
        show: false
      }
    },
    // 柱状图系列
    series: [{
      data: [35, 27, 21, 14, 8],
      type: 'bar',
      // 柱子颜色（分别设置各柱颜色）
      itemStyle: {
        color: function (params) {
          const colors = ['#e91e63', '#ff9800', '#9c27b0', '#2196f3', '#00bcd4'];
          return colors[params.dataIndex];
        },
        borderRadius: [5, 5, 0, 0]
      },
      // 柱子宽度
      barWidth: '40%',
      // 数值标签
      label: {
        show: true,
        position: 'top',
        color: '#ffffff',
        fontSize: 14
      }
    }],
  };

  leftOption && myChart.setOption(leftOption);
  // 右边柱状图
  var rightChartDom = document.getElementById('right');
  var myChart = echarts.init(rightChartDom);
  var rightOption;
  rightOption = {
    // 坐标轴
    xAxis: {
      type: 'category',
      data: ['单位A', '单位B', '单位C', '单位D', '单位E'],
      axisLine: {
        lineStyle: {
          color: '#80c0e0'
        }
      },
      axisLabel: {
        color: '#ffffff'
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: 'min',
      nameTextStyle: {
        color: '#ffffff'
      },
      axisLine: {
        lineStyle: {
          color: '#80c0e0'
        }
      },
      axisLabel: {
        color: '#ffffff'
      },
      splitLine: {
        lineStyle: {
          color: '#80c0e0',
          type: 'dashed'
        }
      },
      axisTick: {
        show: false
      }
    },
    // 柱状图系列
    series: [{
      data: [35, 27, 21, 14, 8],
      type: 'bar',
      // 柱子颜色（分别设置各柱颜色）
      itemStyle: {
        color: function (params) {
          const colors = ['#e91e63', '#ff9800', '#9c27b0', '#2196f3', '#00bcd4'];
          return colors[params.dataIndex];
        },
        borderRadius: [5, 5, 0, 0]
      },
      // 柱子宽度
      barWidth: '40%',
      // 数值标签
      label: {
        show: true,
        position: 'top',
        color: '#ffffff',
        fontSize: 14
      }
    }],
  };
  rightOption && myChart.setOption(rightOption);
  Timer = setInterval(() => {
    processTotal.value++;
    processDigits.value = processTotal.value.toString().split('');
    takeNumTotal.value++;
    takeNumDigits.value = takeNumTotal.value.toString().split('');
  }, 1000);
});
// onBeforeUnmount(() => {
//     // 组件卸载时销毁图表实例，移除事件监听
//     if (chart) {
//         chart.dispose();
//     }
//     window.removeEventListener('resize', handleResize);
// });
</script>

<style lang="scss" scoped>
.center {
  padding: 10px;
  width: 100%;

  .topBox {
    width: 735px;
    display: flex;
    justify-content: space-between;
    margin-top: 50px;

    .item {
      background-color: #04091c;

      .itemContent {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 14px;
        gap: 14px;

        img {
          width: 50px;
          height: 50px;
        }

        p {
          padding: 5px;
          background-color: #082f60;
          color: #81d3f8;
          font-weight: 900;

        }
      }
    }
  }

  .map {
    width: 735px;

    .map-container {
      width: 100%;
      height: 500px;
    }

  }

  .bottomBox {
    width: 735px;
    display: flex;
    justify-content: space-between;

    .itemBox {
      width: 365px;

      .chartBox {
        transform: translateY(30px);
      }
    }
  }
}
</style>